<template>
  <div id="app">

    <!-- 新增表单 -->
    <el-dialog center title="新增" :visible.sync="addFormView">
      <el-form label-position="left" :label-width="formLabelWidth" :model="add">
        <el-form-item label="员工姓名">
          <el-input v-model="add.name" placeholder="员工姓名" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="add.password" placeholder="密码" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="员工工种">
          <el-select v-model.number="add.userType" placeholder="员工工种">
            <el-option v-for="item in options"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addFormView = false">取 消</el-button>
        <el-button type="primary" @click="submitAddForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 修改表单 -->
    <el-dialog title="修改" :visible.sync="updateFormView">
      <el-form label-position="left" :label-width="formLabelWidth" :model="update">
        <el-form-item label="员工姓名">
          <el-input v-model="update.name" placeholder="员工姓名" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="update.password" placeholder="密码" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="员工工种">
          <el-select v-model="update.userType" placeholder="员工工种">
            <el-option v-for="item in options"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateFormView = false">取 消</el-button>
        <el-button type="primary" @click="submitUpdateForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 搜索框 -->
    <el-card class="box-card" shadow="always">
      <el-input
        placeholder="员工名"
        v-model="selectEmployee.name"
        size="medium">
      </el-input>
      <el-select size="medium" v-model="selectEmployee.userType" placeholder="员工类别">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>&nbsp;
      <el-button type="info" size="medium" @click="handelSelect" plain>查询</el-button>
      <el-button type="warning" size="medium" @click="handelRecet" plain>重置</el-button>
    </el-card>
    <el-card class="box-card" shadow="always">
      <el-button type="primary" size="medium" @click="addFormView = true" plain>新增</el-button>
    </el-card>

    <!-- 表格以及分页 -->
    <el-card shadow="always">
      <el-table
        :data="tableData"
        style="width: 100%"
        height="415">
        <el-table-column
          label="姓名"
          width="180"
          prop="name">
        </el-table-column>
        <el-table-column
          label="工种"
          width="180">
          <template slot-scope="scope">
            <el-select size="medium" disabled v-model.number="scope.row.userType">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          label="日期"
          width="180"
          prop="createDate">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.row)">编辑
            </el-button>&nbsp;
            <el-popover
              placement="top"
              width="160"
              v-model="scope.row.visible">
              <p>确定删除？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
                <el-button type="primary" size="mini" @click="handelDelete(scope.row)">确定</el-button>
              </div>
              <el-button type="danger" size="mini" slot="reference">删除</el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>

      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>

    </el-card>
  </div>

</template>

<script>
import { Message } from 'element-ui'
import { register } from '@/api/register'
import { updateEemployee, delteEmployeeById } from '@/api/emp'
import instance from '@/utils/request'

export default {
  name: 'SalePage',
  data () {
    return {
      formLabelWidth: '80px',
      employee: {
        name: '',
        password: '',
        userType: ''
      },
      add: {
        name: '',
        password: '',
        userType: ''
      },
      update: {
        name: '',
        password: '',
        userType: ''
      },
      selectEmployee: {
        name: '',
        userType: ''
      },
      updateFormView: false, // 修改表单显示
      addFormView: false, // 新增表单显示
      input1: '',
      input2: '',
      currentPage: 1, // 当前页
      total: 400,
      pageSize: 10,
      tableData: [],
      options: [
        {
          value: 1,
          label: '教职工'
        },
        {
          value: 2,
          label: '仓库管理员'
        },
        {
          value: 9,
          label: '管理员'
        }
      ]
    }
  },

  methods: {
    handleSizeChange (val) {
      this.pageSize = val
      this.getEmployeeList()
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.getEmployeeList()
    },
    handleEdit (row) {
      this.updateFormView = true
      this.update = row
      this.getEmployeeList()
    },
    handelSelect () {
      this.getEmployeeList()
    },
    handelRecet () {
      this.selectEmployee = {
        name: '',
        userType: ''
      }
      this.getEmployeeList()
    },
    handelAllDelete () {
      console.log('批量删除')
    },
    // 删除员工
    async handelDelete (row) {
      row.visible = false
      const res = await delteEmployeeById(row.id)
      console.log(res)
      Message({
        message: res.data,
        type: 'success'
      })
      this.getEmployeeList()
    },
    // 新增
    async submitAddForm () {
      this.addFormView = false
      const res = await register(this.add)
      Message({
        message: res.data,
        type: 'success'
      })
      this.getEmployeeList()
    },
    // 提交修改表单
    async submitUpdateForm () {
      this.updateFormView = false
      // this.employee = {
      //   name: this.update.name,
      //   password: this.update.password,
      //   userType: this.update.userType
      // }
      const res = await updateEemployee(this.update)
      console.log(res)
      Message({
        message: res.data,
        type: 'success'
      })
      this.getEmployeeList()
    },
    // 渲染表格
    async getEmployeeList () {
      const res = await instance.get(`/employee/list/${this.currentPage}/${this.pageSize}`, {
        params: this.selectEmployee
      })
      this.tableData = res.data.list
      this.total = res.data.total
    }
  },

  created () {
    this.getEmployeeList()
  }

}
</script>

<style scoped>
.box-card {
  margin-bottom: 5px;
}

.el-input {
  width: 200px;
  margin-right: 5px;
}

.el-card ::v-deep .el-card__body {
  padding: 10px;
}

.el-pagination {
  padding: 15px;
}
</style>
